Skip to main content

Creating a Custom Document

The document is an HTML file served by the Node server whenever a page request is made. It contains the head, body, and all HTML tags.

Custom Document enables ability to update these tags and render the data according to the needs.

Custom Document Demo

This demo shows how to create a custom document in Catalyst with various features.

Important Notes

  • Head and Body tags are required - The application won't work without them
  • Props must be passed - They are used internally by Head and Body components
  • Server-side rendering - The document is always rendered on the server
  • Custom content - Add custom tags between Head and Body components

Document Features

Generated Document Code

server/document.js
import { Head, Body } from "catalyst"

function Document(props) {
    return (
        <html lang="en">
            <Head {...props}>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <meta name="description" content="Catalyst Demo Application" />
                <meta name="keywords" content="catalyst, react, ssr" />
            </Head>
            <Body {...props} />
        </html>
    )
}

export default Document

Generated HTML Output

HTML Output
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Catalyst Demo Application">
    <meta name="keywords" content="catalyst, react, ssr">
</head>
<body>
    <!-- Your app content here -->
</body>
</html>